<template>
  <div class="status-container">
    <el-row :gutter="5">
      <el-col :span="12">
        <div class="status-panel-style">
          <div class="status-title-text"> 设备当前状态</div>
          <div class="status-text-container">
            <p v-if="plcData.od > '0.0'&& plcData.oxd>'0.0'" class="statusLight">
              预 热 中
            </p>
            <p v-else-if="plcData.od<='0.0'&& plcData.oxd<='0.0'" class="status-text">
              停 运 中
            </p>
            <p v-else class="status-null">
             无 数 据
            </p>
          </div>

        </div>
      </el-col>
      <el-col :span="12">
        <div class="status-panel-style">
          <div class="status-title-text">设备运行时间</div>
          <div class="status-text-container">
            <p v-if="runTime<=0">-- : -- : --</p>
            <p v-else>
              <!--//数字滚动插件-->
              <count-to :start-val="0" :end-val="timeNum.hourTenDigits" :duration="1000" class=""/>
              <count-to :start-val="0" :end-val="timeNum.hourSingleDigits" :duration="1000" class=""/>
              :
              <count-to :start-val="0" :end-val="timeNum.minuteTenDigits" :duration="1000" class=""/>
              <count-to :start-val="0" :end-val="timeNum.minuteSingleDigits" :duration="1000" class=""/>
              :
              <count-to :start-val="0" :end-val="timeNum.secTenDigits" :duration="1000" class=""/>
              <count-to :start-val="timeNum.secSingleDigits" :end-val="timeNum.secSingleDigits" :duration="1000" class=""/>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--    <div class="status-text-container">
          <div v-if="plcData.od==='0'">  <div v-if="plcData.od==='0'"><p class="status-text">
            设 备 停 运 中
          </p></div></div>
          <div v-else><p class="statusLight">
            废 钢 预 热 中
          </p></div>

          <div class=""><p class="run-time">{{runTime|formatTime}}</p></div>
        </div>-->
  </div>
</template>

<script>
  import moment from 'moment';
  import CountTo from 'vue-count-to';
  import {mapGetters} from 'vuex';
  export default {
    name: "index",
    components: {CountTo},
    //计算属性
    computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
      ...mapGetters(['plcData', 'plcId']),// ...转换成数组
    },
    //侦听事件
    watch: {
      plcId() {
        this.runTime = -1;
      },
      'plcData.dataTime': function (value) {
        let parent = this;
        let plcDeviceStatus = this.plcData.od;
        let plcDevicesOxStatus = this.plcData.oxd;
        if (plcDeviceStatus >0 && plcDevicesOxStatus>0) {
          let currentTime = new Date(value).getTime();
          if (this.runTime <= 0) {
            this.$axios.post('pointDataRecordRoutes', {
              action_type: 'fireUpTime',
              device_id: this.plcId
            }).then(function (response) {
              parent.startTime = parseInt(response.data.data);
              let sjc = currentTime - parent.startTime;
              parent.runTime = sjc;
            })
          } else {
            let sjc = currentTime - this.startTime;
            this.runTime = sjc;
          }
        } else if (plcDeviceStatus <= 0 && this.runTime >= 0) {
          this.runTime = -1;
          this.startTime = null;
        }
      },
      runTime(timeStamp) {
        if (timeStamp > 0) {
          let seconds = this.splitNum(moment.duration(timeStamp).seconds());
          let minutes = this.splitNum(moment.duration(timeStamp).minutes());
          let hours = this.splitNum(moment.duration(timeStamp).hours());
          this.timeNum.secSingleDigits = seconds.singleDigits;
          this.timeNum.secTenDigits = seconds.tenDigits;
          this.timeNum.minuteSingleDigits = minutes.singleDigits;
          this.timeNum.minuteTenDigits = minutes.tenDigits;
          this.timeNum.hourSingleDigits = hours.singleDigits;
          this.timeNum.hourTenDigits = hours.tenDigits;
        }

      }
    },
    data() {
      return {
        runTime: null,
        startTime: null,
        idIsChange: null,
        timeNum: {
          secSingleDigits: 0,
          secTenDigits: 0,
          minuteSingleDigits: 0,
          minuteTenDigits: 0,
          hourSingleDigits: 0,
          hourTenDigits: 0

        }
      }
    },
    methods: {
      splitNum(num) {
        let singleDigits = num;
        let tenDigits = 0;
        if (num >= 10) {
          singleDigits = num % 10;
          tenDigits = Math.floor(num / 10);
        }
        return {singleDigits: singleDigits, tenDigits: tenDigits};
      }
    },
    filters: {
      formatTime(time) {
        if (time < 0) {
          return '-- : -- : --';
        } else {
          let hour = Math.floor(time / 3600000);
          let minute = Math.floor((time % 3600000) / 60000);
          let sencond = Math.floor(((time % 3600000) % 60000 / 1000));
          return `${hour} : ${minute} : ${sencond}`;
        }
      }
    }

  }
</script>

<style lang="scss" scoped>
  /*
  一些经常复用的css 可以使用@mixin来进行定义 通过传参的方式调用
  */
  @mixin font-style($fontColor1,$fontColor2) {
    background: linear-gradient(to right, $fontColor1, $fontColor2);
    -webkit-background-clip: text;
    color: transparent;
    animation: blink 2s linear infinite;
    -webkit-animation: blink 2s linear infinite;
    -moz-animation: blink 2s linear infinite;
    -ms-animation: blink 2s linear infinite;
    -o-animation: blink 2s linear infinite;
  }
  .status-container {
    margin-top: 10px;
    .status-panel-style {
      //改变颜色
      /*background-color: #79b7ff;*/
      border: 2px solid rgba(77, 86, 103, 0.8);
      box-shadow: -1px 0px 11px 9px rgba(77, 86, 103, 0.3) inset;
      height: 200px;
    }
    .status-title-text {
      text-align: center;
      padding-top: 45px;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
    }
    .status-text-container {
      padding-bottom: 45px;
      text-align: center;
      font-weight: bold;
      text-align: center;
      color: #a7f3ff;
      font-size: 23px;
      .status-null{
        color:#fff;
      }
      .status-text {
        @include font-style(rgba(226, 138, 127, 0.93), #ff8987)
      }
      .statusLight {
        @include font-style(rgba(225, 225, 225, 0.93), #45ff6d)
      }

    }
  }

</style>
<style lang="css">
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
  }

  @-webkit-keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
  }

  @-moz-keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
  }

  @-ms-keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
  }

  @-o-keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.8;
    }
  }
</style>

